<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->		
			<uni-nav-bar @clickLeft="toDome" color="#fff" font-size="30px" left-icon="back" left-text="拼团" fixed="true" status-bar="true" :border="border" backgroundColor="#f2bed2;">
						
			</uni-nav-bar>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS || H5 -->
			<view style="background-color: #f2bed2;" class="titleNview-placing"></view>
			<view style="background-color: #f2bed2;" class="topTitle">			
				<view style="padding-top: 8upx;" @click="toDome()">
					<image style="width: 40upx;height: 40upx;" src="F:/819YH/html/static/images/pt_lt.png" mode=""></image>
				</view>
				<view  class="fs22 Cfff">拼团</view>
				<view class=""></view>
			</view>
		<!-- #endif -->
		
		<view class="banner" v-if="Banner.length" style="margin-bottom: 20rpx;height:250rpx; overflow: hidden;">
			<swiper  class="swiper1" :circular="true" :indicator-dots="false" autoplay="true"  interval="2000" duration="500">					
				<swiper-item v-for="(item,index) in Banner" :key="index">
					<navigator v-if="item.adv_url" :url="item.adv_url"><image style="width: 100%;" :src="item.adv_img" mode="widthFix"></image></navigator>
					<image v-else style="width: 100%;" :src="item.adv_img" mode="widthFix"></image>
				</swiper-item>	
			</swiper>	
		</view>	

		<view v-if="groupInfo.left_time>0" class="userBox">	
			<view  class="fl">
				<view class="fs18 C1d1d1d">
					正在拼单
				</view>
				<view class="">
					<image style="height: 52upx;width: 52upx;" src="../static/images/pt_userImg.png" mode=""></image>
				</view>
			</view>
			<view style="display: flex;">
				<view >
					<view style="padding-top: 10upx;" class="fs15 C1d1d1d">
					</view>
					<view class="" style="position: relative;top: -10upx;">
						<text style="position: relative;top: -2upx;" class="fs15 C1d1d1d">剩余 </text>						
						<text v-cloak class="C515151 fs14">{{limitFormatTime2(allMiao)}}</text>
					</view>
				</view>
				<view @click="toDetail(groupInfo.goods_id)" class="fs18 userBoxBtn">去拼单</view>
			</view>
		</view>
		
		<view class="process flex">
			<view class="fs21" :class="[(activeNum1 == index) ? 'active1':'']" @click="activeColor1(index)" v-for="(item,index) in process1" :key="index" >
				{{item.name}}
			</view>
		</view>
		
		<view v-if="activeNum1 == 0" class="">
			<view  class="ptLis">
				<view @click="toDetail(item.goods_id)" v-for="(item,index9) in list" :key="index9" class="ptli">
					<image style="width: 310upx;height: 310upx;" :src="item.goods_image" mode=""></image>
					<view style="margin-top: -15upx;" class="fs18 C333 ptliInfo oneline">
						{{item.goods_name}}
					</view>
					<view v-html="TimeList[index9]" class="fs14 Cfe0000 lh30">					
						<!-- 还有{{limitFormatTime(item.SpellGroup_endDate)}}结束					 -->
					</view>
					<view style="display: flex;justify-content: space-between;" class="">
						<view>
							<view style="line-height: 36upx;" class="fs21 Cfe0000">￥{{item.SpellGroup_price}}</view>
							<view style="line-height: 30upx;" class="fs14 C666 lh30">{{item.SpellGroup_personNum}}人团</view>
						</view>
						<view @click="toDetail(item.goods_id)" class="ptliBtn Cfff fs18">
							我要拼团
						</view>
					</view>
				</view>			
			</view>
		</view>
		<view v-if="activeNum1 == 1" class="">
			<view class="ptLis">
				<view @click="toDetail(item.goods_id)" v-for="(item,index2) in list" :key="index2" class="ptli">
					<image style="width: 310upx;height: 310upx;" :src="item.goods_image" mode=""></image>
					<view style="margin-top: -15upx;" class="fs18 C333 ptliInfo oneline">
						{{item.goods_name}}
					</view>
					<view v-html="TimeList[index2]" class="fs14 Cfe0000 lh30">					
						<!-- 还有{{limitFormatTime(item.SpellGroup_startDate)}}开始				 -->
					</view>
					<view style="display: flex;justify-content: space-between;" class="">
						<view>
							<view style="line-height: 36upx;" class="fs21 Cfe0000">￥{{item.SpellGroup_price}}</view>
							<view style="line-height: 30upx;" class="fs14 C666 lh30">{{item.SpellGroup_personNum}}人团</view>
						</view>
						<view @click="toDetail(item.goods_id)" class="ptliBtn Cfff fs18">
							我要拼团
						</view>
					</view>
				</view>			
			</view>
		</view>
		<view v-if="activeNum1 == 2" class="">
		
			<view class="ptLis">
				<view @click="toDetail(item.goods_id)" v-for="(item,index3) in list" :key="index3" class="ptli">
					<image style="width: 310upx;height: 310upx;" :src="item.goods_image" mode=""></image>
					<view style="margin-top: -15upx;" class="fs18 C333 ptliInfo oneline">
						{{item.goods_name}}
					</view>
					<view  class="fs14 Cfe0000 lh30">					 -->
						已经结束
					</view>
					<!-- <view  v-html="TimeList[index3]" class="fs14 Cfe0000 lh30">					
						<!-- 还有{{limitFormatTime(item.SpellGroup_endDate)}}结束					 -->
					<!-- </view> -->
					<view style="display: flex;justify-content: space-between;" class="">
						<view>
							<view style="line-height: 36upx;" class="fs21 Cfe0000">￥{{item.SpellGroup_price}}</view>
							<view style="line-height: 30upx;" class="fs14 C666 lh30">{{item.SpellGroup_personNum}}人团</view>
						</view>
						<view @click="toDetail(item.goods_id)" class="ptliBtn Cfff fs18">
							<!-- 我要拼团 -->
							已经结束
						</view>
					</view>
				</view>			
			</view>
		</view>
		
		<view v-if="list.length<=0">
			<image style="width: 100%;" :src="`${picUrl}/InfoNull.png`" mode="widthFix"></image>
		</view>
	</view>	
	
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	export default {
		components: {
			uniNavBar
		},
		data() {
			return {
				border:false,
				startorend:"开始",
				TimeList:[],
				state:1,
				curpage:1,
				hasmore:1,
				groupInfo:{
					"Buyer_name":"",
					"need_num":"",
					"left_time":"",
					"userImg":"",
					"goods_id":""
				},
				lis:[],
				list:[],
				circular:true,
				indicatorDots:false,
				allMiao:1586483436,
				timer1:null,				
				process1:[
					{"name":"正在进行"},
					{"name":"即将开始"},
					{"name":"已经结束"}					
				],
				activeNum1:0,
				Banner:"",
				Times:[],
			}
		},
		onHide() {
			this.Times.map((item)=>{
				clearInterval(item)
			})
		},
		onReachBottom() {
			if(this.hasmore){
				this.curpage++
				 this.getLis();				
			}else{
				uni.showToast({
					title:"没有更多数据哟～",
					icon:"none"
				})
			}
		},
		 onLoad(){			 
			 this.getLis();
			 this.timer1=setInterval(()=>{
			 	this.allMiao--				
				if(this.allMiao == 0){
					clearInterval(that.timer1)
				}
			 },1000)	
			 this.getBanner();
		},
		
		methods: {	
			getBanner(){//获取广告列表
				this.$util.request({
					url: '/mobile/index.php?act=h5_adv&op=pintuanAdvList',
					method: 'get',
					data: {},
				}).then((res)=> {
					this.Banner=res.datas.adv_list
				})
			},
			toDetail(id){
				uni.navigateTo({
					url:"/mall/goods/info?goods_id="+id					
				})
			},
			getLis(){
				this.$util.request({					             
					url: '/mobile/index.php?act=spellgroup&op=activity_list',
					method: 'get',
					data: {
						'state':this.state,
						"curpage":this.curpage
					},
				}).then((res)=> {
					this.lis=this.lis.concat(res.datas.list) ;	
					this.list=res.datas.list;	
					if(this.list.length>0){
						for(let i=0;i<this.list.length;i++){
							this.limitFormatTime8(this.list[i].SpellGroup_endtime,i)
						}
					}					
					this.hasmore=res.datas.hasmore							
					this.allMiao=res.datas.groupInfo.Addtime
								
				})
			},
			limitFormatTime8(date,i) {
				var that=this;
				var Time=setInterval(()=>{
				var nowstr = (new Date());
				nowstr= parseInt(nowstr.valueOf()/1000)
				var chazhi = (date - nowstr);
				if (chazhi < 0) {
				    chazhi = 0;
					clearInterval(Time);
					that.TimeList.splice(i,1,"<text>"+that.startorend+"</text>")
				}				
				var h = parseInt((chazhi / 3600) );//% 24
				var m = parseInt((chazhi % 3600) / 60);
				var s = parseInt((chazhi % 3600) % 60);
				h=h<10 ? "0" + h:h;
				m=m<10 ? "0" + m:m;
				s=s<10 ? "0" + s:s;
				that.TimeList.splice(i,1,"还有<text>"+h+"</text>小时<text>"+m+"</text>分钟"+s+"秒")
			 },1000)
			 this.Times.push(Time)
			},
			
			Splicing(value){
				return	value = value<10?"0"+value:value;
			},
					
			getLis2(){
				this.$util.request({
					url: '/mobile/index.php?act=spellgroup&op=activity_list',
					method: 'get',
					data: {
						'state':2
					},
				}).then((res)=>{					
					this.lis=res.datas.list;	
				})
			},
			getLis3(){
				this.$util.request({
					url: '/mobile/index.php?act=spellgroup&op=activity_list',
					method: 'get',
					data: {
						'state':3
					},
				}).then((res)=> {					
					this.lis=res.datas.list;					
				})
			},
			
			
			toLis(){
				uni.navigateTo({
					url:"/operation/spellGroup/record"
				})
			},
			activeColor1(index){
				this.list=[]
				this.lis=[]
				this.activeNum1=index
				this.Times.map((item)=>{
					clearInterval(item)
				})
				this.TimeList=[]
				if(index == 0){
					this.state=1
					this.startorend="结束"
					this.getLis()
				}
				if(index == 1){
					this.state=2
					this.startorend="开始"
					this.getLis()
				}
				if(index == 2){	
					this.state=3
					this.getLis()
				}
				// this.TimeList=""
			},
			toDome(){
				uni.navigateBack({
				    delta: 1
				});
			},
			limitFormatTime(date) {
				var that=this;
			    // 日期格式为 [2019-05-09 20:10:10]
			    date = date.replace(/\-/g,'/');
			    var timestamp = (new Date(date)).valueOf();
			    var nowstr = (new Date()).valueOf();
				setInterval(function(){	
					nowstr=nowstr-1000
				},1000)
			    var chazhi = (timestamp - nowstr)/1000;
			    if (chazhi < 0) {
			        chazhi = 0;
			    }
			    var d = Math.floor(chazhi / 3600 / 24);
			    var h = Math.floor((chazhi / 3600) % 24);
			    var m = Math.floor((chazhi % 3600) / 60);
			    var s = Math.floor((chazhi % 3600) % 60);
			    if (h < 10) {
			        h = "0" + h;
			    }
			    if (m < 10) {
			        m = "0" + m;
			    }
			    if (s < 10) {
			        s = "0" + s;
			    }
				
				return d + "天" + h + "时" + m + "分" + s + "秒"
			},
			limitFormatTime2(data) {
				var that=this;
			    var chazhi = data;
				setInterval(function(){
					chazhi--
				},1000)
			    if (chazhi < 0) {
			        chazhi = 0;
			    }
			    var d = Math.floor(chazhi / 3600 / 24);
			    var h = Math.floor((chazhi / 3600) % 24);
			    var m = Math.floor((chazhi % 3600) / 60);
			    var s = Math.floor((chazhi % 3600) % 60);
			    if (h < 10) {
			        h = "0" + h;
			    }
			    if (m < 10) {
			        m = "0" + m;
			    }
			    if (s < 10) {
			        s = "0" + s;
			    }
				
				return h + ":" + m + ":" + s 
			},
			limitFormatTime3(date) {
				var that=this;
			    // 日期格式为 [2019-05-09 20:10:10]
			    date = date.replace(/\-/g,'/');
			    var timestamp = (new Date(date)).valueOf();
			    var nowstr = (new Date()).valueOf();
				setInterval(function(){
					nowstr=nowstr-1000
				},1000) 
			    var chazhi = (nowstr - timestamp)/1000;
			    if (chazhi < 0) {
			        chazhi = 0;
			    }
			    var d = Math.floor(chazhi / 3600 / 24);
			    var h = Math.floor((chazhi / 3600) % 24);
			    var m = Math.floor((chazhi % 3600) / 60);
			    var s = Math.floor((chazhi % 3600) % 60);
			    if (h < 10) {
			        h = "0" + h;
			    }
			    if (m < 10) {
			        m = "0" + m;
			    }
			    if (s < 10) {
			        s = "0" + s;
			    }
				
				return d + "天" + h + "时" + m + "分" + s + "秒"
			},			
		}
	}
</script>

<style>
	.ptList{
		font-size: 33upx;
		background-color: #ff4300;
		text-align: center;
		margin-top: 10rpx;
		padding: 0 20rpx;
	}
	.ptList image{
		margin-top: 7rpx;
		width: 30rpx;
		height: 40rpx;
		float: right;
		transform:rotate(180deg);
		-ms-transform:rotate(180deg); 	/* IE 9 */
		-moz-transform:rotate(180deg); 	/* Firefox */
		-webkit-transform:rotate(180deg); /* Safari 和 Chrome */
		-o-transform:rotate(180deg); 	/* Opera */
	}
	.Cfe0000{
		color: #ff4300;
	}
	.Cc06{
		color: #ff4300;
	}
	.mt55mb30{
		margin-top: 55upx;
		margin-bottom: 30upx;
	}
	.Cfff{
		color: #FFFFFF;
	}
	.Cfe0000{
		color: #ff4300;
	}

	.flex{		
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-content: space-between;
	}
	.paddingL20{
		padding-left: 20upx;
	}
	.C999{
		color:#999 ;
	}
	.Cff0101{
		color:#ff0101 ;
	}
	.Cc00251{
		color: #c00251;
	}
	.strick{
		text-decoration: line-through;
	}
	.Cfe0000{
		color: #ff4300;
	}
	.line1{
		width: 430upx;
	}
	.hide{
		display: none;
	}
	.marginB20{
		margin-bottom: 20upx;
	}
	
	.twoline{
	   overflow : hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.oneline{
	   overflow : hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	.pl20{
		padding-left: 20upx;
	}
	.positionT{
		position: relative;
		top: 50upx;
	}
	.paddingB15{
		padding-bottom: 15upx;
	}
	.borderB{
		border-bottom: 1px solid #f4f4f6;
	}
	.borderT{
		border-top: 1px solid #f4f4f6;
	}
	.gl{
		position: absolute;
		right: 30upx;
	}
	.lh20{
		line-height: 20upx;
	}
	.lh25{
		line-height: 25upx;
	}
	.lh30{
		line-height: 30upx;
	}
	.pr30{
		padding-right: 30upx;
	}
	.C333{
		color: #333333;
	}
	.C666{
		color: #666666;
	}
	.Cf00{
		color: #ff0000;
	}
	
	.bold{
		font-weight: bold;
	}
	.C1d1d1d{
		color:#1d1d1d ;
	}
	.fs30{
		/* font-size: 30upx */
		font-size: 45upx
	}
	.fs26{
		font-size:39upx
		/* font-size: 26upx */
	}
	.fs12{
		font-size: 18upx
		/* font-size: 12upx */
	}
	.fs16{
		font-size: 24upx
		/* font-size: 16upx */
	}
	.fs14{
		font-size: 21upx
		/* font-size: 14upx */
	}
	.fs15{
		font-size: 22.5upx
		/* font-size: 15upx */
	}
	.fs27{
		font-size: 40.5upx
		/* font-size: 27upx */
	}
	.fs18{
		font-size: 27upx
		/* font-size: 18upx */
	}
	.fs28{
		font-size: 42upx
		/* font-size: 28upx */
	}
	.fs10{
		font-size: 15upx
		/* font-size: 10upx */
	}
	.fs30{
		font-size: 45upx
		/* font-size: 28upx */
	}
	.fs24{
		font-size: 36upx
		/* font-size: 24upx */
	}
	.fs20{
		font-size:30upx
		/* font-size: 20upx */
	}
	.fs22{
		font-size:33upx
		/* font-size: 22upx */
	}
	.fs21{
		font-size: 31.5upx
		/* font-size: 21upx */
	}
	.fl{
		float: left;
	}
	.fr{
		float: right;
	}
	.tac{ 
		text-align: center;
	}
	.Ce5258e{
		color: #e5258e;
	}
	uni-page-body {
		background-color: #FFFFFF;
		color: rgb(102, 102, 102);
	}
	.topTitle{
		display: flex;
		/* justify-content: space-between; */
		background-color: #ff4300;			
		padding-left: 20upx;
		padding-right: 20upx;
		padding-top: 18upx;
		padding-bottom: 10upx;
	}
	.userBox{
		display: flex;
		justify-content: space-between;
		position: relative;
		z-index: 999999999999999999;
		box-sizing: border-box;
		width: 100%;
		height: 128upx;
		border: 2upx solid #ff4300;
		border-radius: 8upx;
		padding: 20upx;
	}
	.userBoxBtn{
		width: 100upx;
		height: 40upx;
		line-height: 40upx;
		border-radius: 10upx;
		background-color: #ff4300;
		color: #FFFFFF;
		text-align: center;
		margin-left: 25upx;
		margin-top: 25upx;
	}
	.process{
		position: relative;
		z-index: 9;
		clear: both;
		background-color: #f0f0f0;
		/* width: 574upx; */
		width: 100%;
		height: 60upx;
		margin: 25upx auto 0;
	}
	.process>view{
		width: 250upx;
		text-align: center;
		font-style: 21upx;
		color: #999999;
		line-height: 60upx;
		box-sizing: border-box;
	}
	.process>view+view{
		border-left: 2upx solid #FFFFFF;
	}
	.process>view.active1{
		/* color: #FFFFFF; */
		/* background- */color: #ff4300;
		color: #ff4300;
	}
	.ptLis{
		margin-top: 30upx;;
		padding: 0 20upx 20upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
		background-color: #FFFFFF;
	}
	.ptli{
		box-sizing: border-box;
		margin-top: 20upx;
		border: 1upx solid #F0F0F0;
		width: 345upx;
		padding: 17upx 16upx;
	}
	.ptliInfo{
		
	}
	.ptliBtn{
		background-color: #ff4300;
		border-radius: 10upx;
		width: 130upx;
		line-height: 45upx;
		height: 45upx;
		text-align: center;
		margin-top: 20upx;
		margin-right: 10upx;
	}
	.titleNview-placing {
		height: var(--status-bar-height);
		box-sizing: content-box;
		background-color: #ff4300;
	 }
	.uni-navbar__content_view text{
		height: 55upx !important;
	}
</style>
